import React, { ReactElement, ReactNode, useState, useEffect } from 'react'
import { Table, Space, Button } from 'antd';
import { getItemList } from '@/api/item'
import Dialog from './components/Dialog'
import { connect } from 'umi'

interface Props {
    changeFlag: Function
}

function List({ changeFlag }: Props): ReactElement {
    const [data, setData] = useState([])
    const [pagination, setPagination] = useState({
        current: 1,
        pageSize: 5,
        total: 1
    })

    const columns = [
        {
            title: '序号',
            key: 'name',
            render: (row: any, item: any, index: number) => {
                return <span>
                    {index + 1}
                </span>
            }
        },
        { title: '装备名称', dataIndex: 'name', key: 'age' },
        {
            title: '图标',
            dataIndex: 'icon',
            key: 'address',
            render: (row: any) => {
                return <img style={{
                    width: 50
                }} src={row} alt="" />
            }
        },
        { title: '星级', dataIndex: 'star', key: 'address' },
        {
            title: '操作',
            dataIndex: '',
            key: 'x',
            render: (row: any) => <Space>
                <Button onClick={() => {
                    // console.log(row._id)
                    changeFlag(true)
                }} type="primary">编辑</Button>
                <Button type="primary" danger>删除</Button>
            </Space>
        },
    ];

    const handlerChange = (value: any) => {
        setPagination(value)
    }

    const init = () => {
        getItemList({
            pagenum: pagination.current,
            pagesize: pagination.pageSize
        }).then((res: any) => {
            const data = res.data
            data.forEach((item: any) => item.key = item._id)
            const pagination2 = pagination
            pagination2.total = res.total
            setPagination(pagination2)
            setData(data)
        })
    }

    useEffect(() => {
        init()
    }, [pagination])
    return (
        <div>
            <Dialog init = { init }/>
            <Table
                bordered
                columns={columns}
                pagination={pagination}
                onChange={handlerChange}
                expandable={{
                    expandedRowRender: record => <div style={{ margin: 0 }}>
                        <p>
                            {record.desc}
                        </p>
                        <p>
                            {record.detail}
                        </p>
                    </div>
                }}
                dataSource={data}
            />
        </div>
    )
}

export default connect((state: any) => {
    return {
        
    }
}, (dispatch) => {
    return {
        changeFlag(flag: boolean) {
            dispatch({ type: "dialog/changeFlag", flag })
        }
    }
})(List)
